<template>
  <div style="height: 100%">
    <div
      v-for="(item, index) in players"
      :key="index"
      style="padding-left: 3%; float: left; width: 25.5%"
    >
      <el-card
        class="monitor-card"
        style="height: 0px; position: relative; padding-bottom: 72%"
        :bordered="false"
      >
        <video :id="item" class="centeredVideo" controls autoplay muted />
      </el-card>
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";
import { mapState, mapActions } from "vuex";

export default {
  name: "flvjs", // 不能使用 video 命名
  // props: {
  //   videoSrc: {
  //     type: String,
  //     // default: "http://10.202.110.106:8090/live?app=live&stream=zhuhong_1"
  //     default: "http://192.168.9.8:8080/live?app=live&stream=9423"
  //   }
  // },
  data() {
    return {
      nowItem: 0,
      flvPlayer: null,
      flvPlayer1: Object,
      flvPlayer2: Object,
      flvPlayer3: Object,
      flvPlayer4: Object,
      flvPlayer5: Object,
      flvPlayer6: Object,

      flvPlayerList: [
        this.flvPlayer1,
        this.flvPlayer2,
        this.flvPlayer3,
        this.flvPlayer4,
        this.flvPlayer5,
        this.flvPlayer6,
      ],

      players: [
        "player1",
        "player2",
        "player3",
        "player4",
        "player5",
        "player6",
      ], //player个数为每页设置流路数
      // streamUrls: this.$store.state.playStreamUrlList
      streamUrls: [],
      itemtotal: 0,
    };
  },
  computed: {
    ...mapState(["playStreamUrlList", "itemTotalNumber"]),
  },
  mounted() {
    // this.crePlayer(0);
  },
  destroyed() {
    console.log("销毁视频");
    this.flv_destroyAll();
  },
  methods: {
    ...mapActions(["changeItemTotal"]),

    crePlayer(val) {
      //val值为currentPage-1
      let pagesize = 6;

      var obj = this.playStreamUrlList;
      var arr_obj = Object.keys(obj);
      var valArr2 = arr_obj.map(function (i) {
        return obj[i];
      });
      // this.$store.state.playStreamUrlList = {};
      //清空this.$store.state.playStreamUrlList
      // for (let key in this.playStreamUrlList) {
      //   delete this.playStreamUrlList[key];
      // }

      this.streamUrls = valArr2;
      this.itemtotal = arr_obj.length;
      let to = this.itemtotal;
      this.changeItemTotal(to); //改变page的total

      if (flvjs.isSupported()) {
        for (let index = 0; index < this.players.length; index++) {
          let videoElement = document.getElementById(this.players[index]);
          // let flvPlayerNew = "this.flvPlayer" + (index + 1).toString();
          // console.log("flvPlayerName:", flvPlayerNew);

          // //销毁上次使用播放器
          if (typeof this.flvPlayerList[index] !== "undefined") {
            if (this.flvPlayerList[index] !== null) {
              this.flvPlayerList[index].unload();
              this.flvPlayerList[index].detachMediaElement();
              this.flvPlayerList[index].destroy();
              this.flvPlayerList[index] = null;
              console.log("已销毁视频");
            }
          }

          if (pagesize * val + index < this.itemtotal) {
            this.flvPlayerList[index] = flvjs.createPlayer({
              type: "flv",
              isLive: true,
              hasVideo: true,
              url: this.streamUrls[pagesize * val + index],
              // url: this.streamUrls[pagesize * val + index]
            });
            // console.log("this.flvPlayerList[index]", this.flvPlayerList[index]);
            this.flvPlayerList[index].attachMediaElement(videoElement);
            this.flvPlayerList[index].load();
            this.flvPlayerList[index].play();
          }
        }
      }
    },

    flv_destroyAll() {
      console.log("销毁所有视频");
      for (let index = 0; index < this.flvPlayerList.length; index++) {
        // let flvPlayerNew = "this.flvPlayer" + (index + 1).toString();
        if (this.flvPlayerList[index] != null) {
          this.flvPlayerList[index].pause();
          this.flvPlayerList[index].unload();
          this.flvPlayerList[index].detachMediaElement();
          this.flvPlayerList[index].destroy();
          this.flvPlayerList[index] = null;
        }
      }
    },

    flv_load_mds() {
      console.log("视频地址:", this.videoSrc);
      var videoElement = document.getElementById("videoPlayer");
      if (typeof this.flvPlayer !== "undefined") {
        if (this.flvPlayer != null) {
          this.flvPlayer.unload();
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        }
      }
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasVideo: true,
        url: this.videoSrc,
      });
      // this.createPlayerFun();
      console.log("开始加载视频");
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      console.log("开始播放视频");
      // this.flvPlayer.play();
    },
    flv_start() {
      console.log("开始播放视频");
      this.flvPlayer.play();
    },
    flv_pause() {
      console.log("暂停视频");
      this.flvPlayer.pause();
    },
    flv_destroy() {
      // console.log('销毁视频')
      if (this.flvPlayer != null) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },
    show_flv_version() {
      console.log("flvjs的版本：", flvjs.version);
    },
    showLogging() {
      console.log("日志：");
      let flvStatus = flvjs.LoaderStatus;
      let flvEvent = flvjs.Events;
      let flvError = flvjs.ErrorDetails;
      console.log(flvStatus, flvEvent, flvError);
    },
  },
};
</script>

<style>
.centeredVideo {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}
.monitor-card {
  width: 100%;
  /* width: 50%; */
  /* height: 1600px; */
  height: 100%;
  /* margin-left: 20px; */
  margin-top: 20px;
}
.monitor-card .ivu-card-head {
  padding: 4px 5px;
  border-bottom: 1px solid #13a4c2;
  background-color: #13a4c2 !important;
  height: 35px;
}
.monitor-card .ivu-card-head p {
  font-size: 2.2rem;
  height: 35px;
  line-height: 30px;
  color: #fff;
  text-align: left;
}
.monitor-card .ivu-card-body {
  padding: 1px;
  background-color: #13a4c2;
}
.monitor-card .ivu-card-body p {
  height: 35px;
  line-height: 30px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
}
</style>
